<!-- 奖牌榜 -->
<template>
  <div>
    <header class="game_modal_header">奖牌榜</header>
    <div class="medal_content modal_shadow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="团体积分排名" name="teamRank">
          <team-rank v-if="is1" />
        </el-tab-pane>
        <el-tab-pane label="个人积分排名" name="peopleRank">
          <people-rank v-if="is2" />
        </el-tab-pane>
        <el-tab-pane label="教练积分排名" name="coachRank">
          <coach-rank v-if="is3" />
        </el-tab-pane>
        <el-tab-pane label="领队积分排名" name="leaderRank">
          <leader-rank v-if="is4" />
        </el-tab-pane>
        <el-tab-pane label="区域排名" name="regionRank">
          <region-rank v-if="is5" />
        </el-tab-pane>
        <el-tab-pane label="项目排名" name="objectRank">
          <object-rank />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import teamRank from './medal/teamRank';
import objectRank from './medal/objectRank';
import regionRank from './medal/regionRank';
import peopleRank from './medal/peopleRank';
import coachRank from './medal/coachRank';
import leaderRank from './medal/leaderRank';
export default {
  name: 'GameMedal',
  components: { teamRank, peopleRank, coachRank, leaderRank, objectRank, regionRank },
  data() {
    return {
      activeName: 'teamRank',
      is1: true,
      is2: false,
      is3: false,
      is4: false,
      is5: false
    };
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'teamRank') {
        this.is1 = true;
        this.is2 = false;
        this.is3 = false;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'peopleRank') {
        this.is1 = false;
        this.is2 = true;
        this.is3 = false;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'coachRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = true;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'leaderRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = false;
        this.is4 = true;
        this.is5 = false;
      } else if (tab.name === 'regionRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = false;
        this.is4 = false;
        this.is5 = true;
      }
    }
  }
};
</script>
<style scoped>
.modal_shadow {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.game_modal_header {
  position: relative;
  box-sizing: border-box;
  height: 40px;
  padding-left: 20px;
  margin-bottom: 14px;
  line-height: 40px;
  color: #353434;
  font-weight: bold;
  font-size: 20px;
}
.game_modal_header::after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 40px;
  background-color: #E02020;
  border-radius: 4px;
  content: "";
}
.medal_content {
  padding: 20px;
}
.el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
  color: #e02020;
}
.el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
  color: #e02020;
}
.el-tabs /deep/ .el-tabs__active-bar {
  background-color: #e02020;
}
</style>
